<template>
	<view style="height: 100%;">
		<navbar title="邀约任务" :back="true" color="#fff" bgColor="#3277fc" leftIconColor="#fff"></navbar>
	    <view style="position: fixed;z-index: 20000;left: 0;width: 100%;background-color:#3277fc;padding:20rpx 0;" :style="{top:`${topheight}px`}">	
			<!-- <view  style="background-color: rgba(167, 167, 167,.2);border-radius: 26rpx;margin:0 40rpx 20rpx 40rpx;">
				<u-search placeholder="输入会议主题名称" v-model="page.keyword" shape="round" :showAction="false" @search="search"  bgColor='#fff' color='#000' searchIcon='search' placeholderColor='##a5a5a5' searchIconColor='#a5a5a5'>
				</u-search>
			</view> -->
			<u-tabs :list="tabList" @click="changTab" lineColor="#fff" sticky :inactiveStyle="{color:'#fff',fontWeight:'450'}" :activeStyle="{color:'#fff',fontWeight:'650'}"></u-tabs>
		</view>
		<view style="height: 126rpx;"></view>
		<view class="conter">
		    <view style="padding: 0 20rpx 20rpx 20rpx;" v-if="list.length!=0">
				<view v-for="(item,index) in list" :key="index" style="background-color:#fff;border-radius: 20rpx;margin-top: 20rpx;padding: 20rpx;">
					<view style="display: flex;align-items: center;justify-content: space-between;padding-bottom: 20rpx;border-bottom: 2rpx solid rgba(112, 112, 112,.15);" >
						<view style="font-size: 24rpx;color: #333333;">{{item.name}}</view>
						<view style="color:#FF2727;font-size: 22rpx;font-weight: 650;display: flex;align-items: center;" v-if="item.statue==0&&showTime">
							<view style="margin-right: 10rpx;">倒计时:  </view>
						    <u-count-down
						          :time="item.beginTime"
						          format="DD:HH:mm:ss"
						          autoStart
						          @change="onChange"
						      >
						          <view class="time">
						              <text class="time__item">{{timeData.days>10?timeData.days:'0'+timeData.days}}&nbsp;天</text>
						              <text class="time__item"style="margin-left: 10rpx;">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;:</text>
						              <text class="time__item" style="margin-left: 10rpx;">{{timeData.minutes>10?timeData.minutes:'0'+timeData.minutes}}&nbsp;:</text>
						              <text class="time__item" style="margin-left: 10rpx;">{{timeData.seconds>10?timeData.seconds:'0'+timeData.seconds}}&nbsp;</text>
						          </view>
						      </u-count-down>
						</view>
						<view v-if='item.statue==0&&!showTime' style="color:#FF2727;font-size: 22rpx;font-weight: 650;display: flex;align-items: center;">活动已结束</view>
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;border-bottom: 2rpx solid rgba(112, 112, 112,.15);padding:20rpx 0;" @click="godet(item.id)">
						<view style="display: flex;">
							<image :src="item.image"  style="width: 140rpx;display:block;border-radius: 20rpx;height: 140rpx;"></image>
							<view style="margin-left: 20rpx;width: 360rpx;">
								<view style="font-size: 28rpx;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;width:360rpx;">{{item.orderName}}</view>
								<view style="display: flex;align-items: center;font-size: 22rpx;color: #999999;margin-top: 20rpx;">
									<view class="">主办方:</view>
									<view class="">{{item.businessName}}</view>
								</view>
							</view>
						</view>
						<view style="text-align: right;">
							<image v-if="item.statue==0" src="https://cdn.yowswl.com/image/admin/2023/11/24/84c124d0d62444448e9779f91cf778eeott8lzlwoj.gif" mode="" style="width: 20rpx;height: 20rpx;margin-right: 20rpx;margin-bottom: 34rpx;"></image>
							<view style="width: 20rpx;height: 20rpx;border-radius: 50%;background-color:#cccccc;margin-bottom: 34rpx;display: inline-block;margin-right: 20rpx;"v-if="item.statue==2||item.statue==1"></view>
							
							<view class="">
								<view style="color:#fff;font-weight: 650;font-size: 24rpx;background-color:red;padding:10rpx 30rpx;border-radius: 40rpx;" v-if="item.statue==0" @click.stop="goCard(`/pages/sub/store/detail?id=${item.oid}`)">去邀约</view>
								<view style="color:#f0f0f0;font-weight: 650;font-size: 24rpx;background-color:#cccccc;padding:10rpx 30rpx;border-radius: 40rpx;" v-if="item.statue==2" @click.stop="showToast('你已经完成了该任务,请继续努力完成其他任务')">未完成</view>
								<view style="color:#fff;font-weight: 650;font-size: 24rpx;background-color:#3c7efc;padding:10rpx 30rpx;border-radius: 40rpx;" v-if="item.statue==1" @click.stop="showToast('该任务已经结束了哦,请继续努力完成其他任务')">已完成</view>
							</view>
						</view>
					</view>
					
					
					<view style="padding-top: 20rpx">
						<view v-for="(e,d) in item.taskList" :key="d" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;padding: 0 20rpx;">
							<image :src="imgList[e.type]" mode="" style="width:48rpx;height: 48rpx;"></image>
							<view style="width:90%;margin-top: 10rpx;">
								<view style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
									<view style="display: flex;align-items: center;">
										<view style="font-size: 24rpx;font-weight: 650;">{{typeList[e.type]}}</view>
										<view style="width: 4rpx;height: 22rpx;background-color: #bfbfbf;border-radius: 10rpx;margin: 0 10rpx;"></view>
										<view style="font-size: 22rpx;color: #bfbfbf;">{{e.cateName}}</view>
									</view>
									<view style="display: flex;align-items: center;">
										<view style="font-size: 20rpx;text-align: center;color:#70a0fc;margin-left: 20rpx;">{{e.useNum}}</view>
										<view style="font-size: 20rpx;text-align: center;color:#999999;margin-left: 8rpx;"> / {{e.num}}</view>
									</view>
								</view>
								<u-line-progress :percentage="(e.useNum/e.num)*100" :showText="false" :activeColor="e.type==0?'#d8b175':e.type==1?'#f9c336':e.type==2?'#a2b1c5':e.type==3?'#9390dd':''" height='8'></u-line-progress>
							</view>
						</view>
					</view>
				</view>
			</view>
            <view class="" v-else>
            	<u-empty
            	        mode="list"
            	        icon="http://cdn.uviewui.com/uview/empty/list.png"
            			text='暂无邀约任务'
            	>
            	</u-empty>
            </view>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/baseNavbar.vue"
	import {
		goNav
	} from '@/lib/Comment.js'
	import {
		gettaskList
	} from "@/api/make.js"
	export default{
		components:{
			navbar
		},
		data(){
			return{
				loadend: false,
				loading: false,
				topheight:'',
				typeList:['达人','商家','团长',"机构"],
				imgList:['https://cdn.yowswl.com/image/admin/2023/11/24/ed68b1bb0eff44fd94bb1274d8e96d9edu426knvgq.gif','https://cdn.yowswl.com/image/admin/2023/11/24/c89aca42b01a4115bdd45709ee81aa365ikg0wxmun.gif','https://cdn.yowswl.com/image/admin/2023/11/24/de85e84e8afc4c31a35dc85b1646b14brueagqw8fu.gif','https://cdn.yowswl.com/image/admin/2023/11/24/0477f8886dde46e683b585fb9f6e6fad2m0dh93zf2.gif'],
				list:[
					{
						image:'https://cdn.yowswl.com/image/admin/2023/11/22/c0b2a8f548dc402f9994e3df3f3261dc01mm30qnc5.png',
						name:"抖音电商源头优选X亚鸥商达撮合会-广州站",
						businessName:'亚鸥万商物联',
						statue:1,
						
					}
				],
				tabList:[
					{
						name:'进行中',
						statue:0
					},{
						name:"己完成",
						statue:1
					},{
						name:"未完成",
						statue:2
					}
				],
				type:[],
				timeData: {},
				showTime:false,
				page: {
					page: 1,
					limit: 10,
					statue:0,
					keyword:''
				}
			}
		},
		onLoad(){
			this.resetList()
			this.topheight = uni.getMenuButtonBoundingClientRect().bottom+4
		},
		methods:{
			showToast(text){
				uni.showToast({
					title:text,
					icon:'none'
				})
			},
			onChange(e) {
			   this.timeData = e
			},
			godet(id){
				uni.navigateTo({
					url:"/pages/sub/store/Invitdet?id="+id
				})
			},
			search(){
				this.resetList()
			},
			changTab(e){
				this.page.statue = e.statue
				console.log(this.page.statue);
				this.resetList()
			},
			resetList(callback){
				this.page.page = 1;
				this.loading = false
				this.loadend = false
				this.list = []
				this.getList(callback)
				
			},
			timeToTimestamp(time){
			   let timestamp = Date.parse(new Date(time).toString());
			   //timestamp = timestamp / 1000; //时间戳为13位需除1000，时间戳为13位的话不需除1000
			   console.log(time + "的时间戳为：" + timestamp);
			   return timestamp;
			   
			   //2021-11-18 22:14:24的时间戳为：1637244864707
			 },
		      getNowTime () {
			   let now = new Date();
			   let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
			   let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
			   let today = now.getDate(); //获取当前日(1-31)
			   let hour = now.getHours(); //获取当前小时数(0-23)
			   let minute = now.getMinutes(); //获取当前分钟数(0-59)
			   let second = now.getSeconds(); //获取当前秒数(0-59)
			   let nowTime = ''
			   nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today) + ' ' + this.fillZero(hour) + ':' +
			     this.fillZero(minute) + ':' + this.fillZero(second)
			   return nowTime
			 },
			 
			fillZero (str) {
			   var realNum;
			   if (str < 10) {
			     realNum = '0' + str;
			   } else {
			     realNum = str;
			   }
			   return realNum;
			 },
			getList(callback) {
				if (this.loadend || this.loading)
					return
				this.loading = true
				gettaskList(this.page).then(res => {
					this.page.page++
					this.$set(this, 'list', this.list.concat(res.data.list))
					this.list.forEach(item=>{
						item.beginTime = this.timeToTimestamp(item.beginTime) - this.timeToTimestamp(this.getNowTime())
						console.log('11',Math.sign(1));
						if(Math.sign(item.beginTime)>0){
							this.showTime = true
							console.log('111222');
						}else{
							this.showTime = false
							console.log('222333');
						}
					})
					console.log('list',this.list);
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
					if (callback != undefined) {
						callback()
					}
				}).catch(err => {
					this.loading = false
					this.loadend = true
					if (callback != undefined) {
						callback()
					}
				})
			},
			goCard(url, appid) {
				if (appid) {
					uni.navigateToMiniProgram({
						appId: appid,
						path: url,
						envVersion: 'release'
					})
				} else {
					goNav(url)
				}
			
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color:#f5f5f5;
	}
</style>
<style lang="scss" scoped>
	
</style>